<template>
  <div class="table-box">
    <ProTable ref="proTable" title="原料库存列表" row-key="id" :indent="20" :columns="columns" :request-api="getGoodTotalList">
      <template #tableHeader>
        <!-- <el-button type="primary" @click="printBox">打印</el-button> -->
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="goodTotal">
import { ref } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getGoodTotalList, getStorehouseList, getWaresCategoryList } from "@/api/modules/inventory";

const proTable = ref<ProTableInstance>();
const columns: ColumnProps<Inventory.ResGoodTotalList>[] = [
  { type: "index", label: "序号", width: 60 },
  { prop: "goodsName", label: "原料名称", minWidth: 80, align: "center" },
  {
    prop: "barCode",
    label: "原料编码",
    minWidth: 164,
    align: "center",
    search: { el: "input", placeholder: "请输入物品名称/编码/助记码/拼音码", label: "原料", key: "content" }
  },
  // { prop: "goodsName", label: "原料名称", minWidth: 180, align: "center", search: { el: "input" } },
  {
    prop: "houseName",
    label: "仓库",
    minWidth: 130,
    align: "center",
    enum: () => getStorehouseList({ pageNumber: 1, pageSize: 999 }),
    isFilterEnum: false,
    fieldNames: { label: "name", value: "id" },
    search: { el: "select", key: "houseId" }
  },
  { prop: "quantity", label: "库存数量", minWidth: 80, align: "center" },
  { prop: "amount", label: "库存金额", minWidth: 80, align: "center" },
  // { prop: "price", label: "零售价", minWidth: 80, align: "center" },
  { prop: "costPrice", label: "成本价", minWidth: 80, align: "center" },
  { prop: "unitName", label: "单位", minWidth: 80, align: "center" },
  {
    prop: "categoryName",
    align: "center",
    label: "原料分类",
    width: 110,
    isFilterEnum: false,
    fieldNames: { label: "name", value: "id" },
    enum: () => getWaresCategoryList({ pageNum: 1, pageSize: 9999 }),
    search: {
      el: "tree-select",
      key: "categoryId",
      label: "原料分类"
    }
  }
  // { prop: "minQuantity", label: "最小库存", minWidth: 120, align: "center" },
  // { prop: "maxQuantity", label: "最大库存", minWidth: 120, align: "center" }
  // // { prop: "operation", label: "操作", width: 220, fixed: "right" }
];

// id="tableBox" const printBox = () => {
//   setTimeout(function () {
//     print({
//       printable: "printBox",
//       type: "html",
//       scanStyles: false,
//       targetStyles: ["*"]
//     });
//   }, 500);
// };
</script>
